<template>
  <div class="menu">
    <span style="font-size: 18px">{{ title }}</span>
    <div style="width: 250px; padding: 20px 0" @click="dis()">
      <el-card style="height: 55px"
        ><i class="el-icon-folder" style="color: #409eff"></i> 新增用户<i
          class="el-icon-plus"
          style="margin-left: 6.5vw; color: #409eff"
        ></i>
      </el-card>
    </div>
    <!-- 管理员 -->
    <div style="display: flex; align-items: center">
      <div
        style="
          width: 6px;
          height: 6px;
          background: #409eff;
          border-radius: 4px;
          margin: 10px 0;
        "
      ></div>
      <span style="margin-left: 10px">管理员</span>
    </div>
    <el-card :body-style="{ padding: '0px' }" style="width: 15%">
      <img :src="userhead" class="image" />
      <div style="padding: 14px">
        <span>陈念</span>
      </div>
    </el-card>
    <div class="vis">
      <el-dialog
        title="新增用户"
        :visible.sync="dialogVisible"
        width="30%"
        center
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.psd"></el-input>
          </el-form-item>
        </el-form>
        <img-inputer
          class="inputer"
          v-model="file1"
          theme="light"
          size="5px"
          type="file"
          accept="image/*"
          placeholder="请上传用户头像"
          @change="chooseImg"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="adduser()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "用户管理",
      dialogVisible: false,
      editpsd: false,
      file1: "",
      form: {
        name: "",
        psd: "",
      },
      ruleForm1: {
        num: "11",
        name: "11",
        code: "11",
        driverNum: "11",
        pass: "11",
        base1: "",
        base2: "",
        base3: "",
      },
      userhead: require("../../../assets/img/1.jpg"),
    };
  },
  methods: {
    dis() {
      this.dialogVisible = true;
    },
    adduser() {
      this.$axios
        .post("http://43.142.118.44/backstorg/pushimg.php", {
          params: {
            num: this.ruleForm1.num,
            name: this.ruleForm1.name,
            code: this.ruleForm1.code,
            driverNum: this.ruleForm1.driverNum,
            pass: this.ruleForm1.pass,
            img1: this.ruleForm1.base1,
            img2: this.ruleForm1.base2,
            img3: this.ruleForm1.base3,
          },
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((response) => {
          let res = response.data;
          if (res.message == 1) {
            this.loginModalFlag = false;
            this.resetForm("ruleForm1");
            this.$message({
              type: "success",
              message: "注册成功",
            });
          } else if (res.message == 0) {
            this.$message({
              type: "warning",
              message: "您的账号已经被注册啦，请直接登录",
            });
          } else {
            this.$message.error("信息提交失败，请重新注册");
          }
        });
    },
    chooseImg() {
      //上传照片时将图片转为base64
      let file = this.file1; //file1是绑定的file对象
      let reader = new FileReader();
      let img = new Image();
      // 读取图片
      reader.readAsDataURL(file);
      // 读取完毕后的操作
      reader.onloadend = (e) => {
        img.src = e.target.result;
        // 这里的e.target就是reader
        // console.log(reader.result)
        // reader.result就是图片的base64字符串
        this.ruleForm1.base1 = reader.result;
      };
    },
    //将数据post给后台：
  },
};
</script>
<style>
.menu {
  padding: 30px;
  background: #f0f2f5;
  height: 93vh;
  overflow-y: scroll;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.vis {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputer{
  margin-left: 80px;
}
* {
  caret-color: rgba(0, 0, 0, 0);
}
</style>